<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
body{
	background: #CCCCCC;
}
p,.houdun{
	width: 100px;height: 100px;
	border: 5px solid white;
	border-radius: 50%;
	position: absolute;
}
.houdun{
	background: #E7E5E7 url(images/logo_blue.png) no-repeat center;
	background-size: 80% 80%;
	border: 5px solid #00A0E1;
	cursor: pointer;
	transition:1s;
}
.houdun:hover{
	transform:rotate(720deg);
	background: black url(images/logo_blue.png) no-repeat center;
	background-size: 80% 80%;
}
p:nth-child(1){
	background: url(images/1.png) no-repeat center;
	background-size: 100% 100%;
}
p:nth-child(2){
	background: url(images/2.png) no-repeat center;
	background-size: 100% 100%;
}
p:nth-child(3){
	background: url(images/3.png) no-repeat center;
	background-size: 100% 100%;
}
p:nth-child(4){
	background: url(images/4.png) no-repeat center;
	background-size: 100% 100%;
}
p:nth-child(5){
	background: url(images/5.png) no-repeat center;
	background-size: 100% 100%;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="houdun"></div>
</body>
<script>
// 抓取元素
var ps = document.getElementsByTagName('p');
var hd = document.getElementsByClassName('houdun')[0];
var c = 0;
var r = 200;
// 计算出居中位置
var hd_left = (document.documentElement.clientWidth - hd.offsetWidth)/2;
var hd_top = (document.documentElement.clientHeight - hd.offsetHeight)/2;
// 将居中的值赋值给元素
hd.style.left = hd_left + "px";
hd.style.top = hd_top + "px";
// 通过遍历给所有的p元素赋值
for(var i=0;i<ps.length;i++){
    ps[i].style.left = hd_left + "px";
    ps[i].style.top = hd_top + "px";
}
// 绑定点击事件
hd.onclick=function(){
    if(c == 0){
    	c=1;
    	for(var i=0;i<ps.length;i++){
    		// 获得每个元素的度数
    		var deg = -180/ps.length*i;
    		var zhi = gougu(deg,r);
    		// 每个元素所在的位置
    		ps[i].style.left = hd_left + zhi.gu + "px";
    		ps[i].style.top = hd_top + zhi.gou + "px";
    		// 给每个元素添加旋转动画
    		ps[i].style.transform = "rotate(720deg)";
    		ps[i].style.transition = "1s"+" "+0.5*i+"s";
    	}
    }else{
    	c=0;
    	for(var i=0;i<ps.length;i++){
     		// 初始化每个元素所在的位置
    		ps[i].style.left = hd_left + "px";
    		ps[i].style.top = hd_top + "px";
    		// 初始化给每个元素添加旋转动画
    		ps[i].style.transform = "rotate(0deg)";  		
    	}
    }
}

// 2*Math.PI
// 1弧度 = 360 /（2*Math.PI） 角度
// 1弧度 = 180 /Math.PI 角度
// 1角度  = Math.PI/180 弧度

// 获得勾股具体值
function gougu(deg,r){
    var gou = Math.sin(deg*Math.PI/180)*r;
    var gu = Math.cos(deg*Math.PI/180)*r;
    return {"gou":gou,"gu":gu};
}



</script>








</html>